import React, { useState } from "react";
import { connect } from "react-redux";

import { addAction } from "./store/actionCreators";

const mapDispatchToProps = (dispatch) => {
  return {
    add(payload) {
      dispatch(addAction(payload));
    },
  };
};

const Form = (props) => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleClick = () => {
    // console.log(value);
    props.add({ title: value, id: Date.now() });
    setValue("");
  };

  return (
    <>
      <input
        type="text"
        className="todo-input"
        value={value}
        onChange={handleChange}
      />
      <button onClick={handleClick}>添加</button>
    </>
  );
};

export default connect(null, mapDispatchToProps)(Form);
